<script>
import {defineComponent} from 'vue'

export default defineComponent({
  name: "Footer",
  computed: {
    isAll() {
      return this.todos.every((item) => {
        return item.done === true
      })
    },
    total() {
      // let i=0
      // this.todos.forEach((item)=>{
      //   if (item.done){
      //     i++
      //   }
      // })
      // return i
      return this.todos.reduce((pre, current) => {
        return pre + (current.done ? 1 : 0)
      }, 0)
    }
  },
  methods: {
    isAllDone(e) {
      this.isAllChecked(e.target.checked)
    },
    removeAll(){
      this.clearAllTodo()
    }
  },
  props: {
    todos: {
      type: Array
    },
    isAllChecked: {
      type: Function,
    },
    clearAllTodo:{
      type:Function
    }
  }
})
</script>

<template>
  <div class="footer" v-if="todos.length">
    <div class="left">
      <input type="checkbox" :checked="isAll" @change="isAllDone">
      <span>已经完成{{ total }}/全部{{ todos.length }}</span>
    </div>
    <button @click="removeAll">清除已完成的任务</button>
  </div>
</template>

<style scoped lang="less">
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;

  button {
    height: 30px;
    background-color: #DC143C;
    color: #fff;
    border: 0;
    cursor: pointer;
    border-radius: 10px;
    padding: 0 5px;
  }
}

</style>
